<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/base.css" />
	</head>

	<body>
		<table id="list" lay-filter="test" class="layui-table"></table>

		<!--弹出框-->
		<div id="modal"></div>

		<!--列表顶部添加按钮-->
		<script type="text/html" id="tpl_add_btn">
			<a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
		</script>

		<!--列表右侧编辑删除按钮模板-->
		<script type="text/html" id="tpl_manipulation_btn">
			<a class="layui-btn layui-btn-xs" lay-event="dtl">
				<i class="layui-icon layui-icon-form"></i> 详情
			</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">
				<i class="layui-icon layui-icon-edit"></i> 编辑
			</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
				<i class="layui-icon layui-icon-delete"></i> 删除
			</a>
		</script>
		<!--编辑用户详情弹出层-->
		<script type="text/html" id="tpl_dtl_form">
			<form class="layui-form layui-form-pane" style="padding:20px;">
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="email" name="email" placeholder="请输入你的邮箱" class="layui-input" autocomplete="off" value="{{email}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">生日</label>
					<div class="layui-input-block">
						<input type="text" name="birth" placeholder="长按选择日期" class="layui-input" autocomplete="off" id="birth" value="{{birth}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">月收入</label>
					<div class="layui-input-block">
						<input type="number" name="salary" placeholder="请输入你的月薪" class="layui-input" autocomplete="off" value="{{salary}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">工作</label>
					<div class="layui-input-block">
						<input type="text" name="jod" placeholder="请输入你所从事的行业" class="layui-input" autocomplete="off" value="{{jod}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">喜欢的球队</label>
					<div class="layui-input-block">
						<input type="text" name="lteam" placeholder="请输入你喜欢的球队" class="layui-input" autocomplete="off" value="{{lteam}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">喜欢的球员</label>
					<div class="layui-input-block">
						<input type="text" name="lplayer" placeholder="请输入你喜欢的球员" class="layui-input" autocomplete="off" value="{{lplayer}}">
					</div>
				</div>
				<input type="hidden" name="bid" value="{{bid}}" />
				<input type="hidden" name="uid" value="{{uid}}" />
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</script>

		<script type="text/html" id="tpl_form">
			<form class="layui-form layui-form-pane" style="padding:20px;">
				<div class="layui-form-item">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-block">
						<input type="text" name="phone" required lay-verify="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input" value="{{phone}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" value="{{pwd}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">后台权限</label>
					<div class="layui-input-block">
						<input type="checkbox" name="admin" lay-filter="switchTest" lay-skin="switch" lay-text="开启|关闭" {{if admin==1 }}checked value="1" {{/if}}{{if admin==0 }} value="0" {{/if}}>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">账号状态</label>
					<div class="layui-input-block">
						<input type="radio" name="user_state" value="0" title="正常" {{if user_state==0 }}checked{{/if}}>
						<input type="radio" name="user_state" value="-1" title="锁定" {{if user_state==- 1}}checked{{/if}}>
						<input type="radio" name="user_state" value="-2" title="禁用" {{if user_state==- 2}}checked{{/if}}>
					</div>
				</div>
				<input type="hidden" name="uid" value="{{uid}}" />
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</script>

		<script src="layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script>
			layui.use(['form', 'laypage', 'layer', 'table', 'laydate'], function() {
				var laypage = layui.laypage, //加载分页模板
					layer = layui.layer, //弹窗模板
					form = layui.form, //表单模板
					table = layui.table, //表格模板
					$ = layui.jquery,
					laydate = layui.laydate; //日期选择器

				var formType = "";

				$(function() {
					table_reder();
				})

				function table_reder() {
					table.render({
						elem: "#list",
						url: "/user/list",
						cols: [
							[{
								field: 'uid',
								title: "编号",
								width: 70,
								sort: true
							}, {
								field: 'phone',
								title: "手机号",
								unresize: true
							}, {
								field: 'admin',
								title: "后台权限",
								width: 100,
								templet: function(data) {
									if(data.admin == 1)
										return "有";
									if(data.admin == 0)
										return "无";
								}
							}, {
								field: 'user_state',
								title: "账号状态",
								width: 100,
								templet: function(data) {
									if(data.user_state == 0)
										return "正常";
									if(data.user_state == -1)
										return "锁定";
									if(data.user_state == -2)
										return "禁用";
								}
							}, {
								field: 'right',
								title: "操作",
								width: 240,
								align: 'center',
								toolbar: "#tpl_manipulation_btn"
							}]
						],
						page: true,
						toolbar: '#tpl_add_btn'
					});
				}

				//右侧工具栏监听
				table.on('tool(test)', function(obj) {
					var data = obj.data, //获得当前行数据
						layEvent = obj.event, //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						tr = obj.tr, //获得当前行 tr 的DOM对象
						uid = data.uid;

					if(layEvent == "dtl") {
						formType = "dtl";
						$.ajax({
							type: "GET",
							url: "/basic/details",
							data: {
								uid: uid
							},
							dataType: "JSON",
							success: function(data) {
								if(data[0].birth != null) {
									data[0].birth = data[0].birth.split("T")[0]
								}
								$("#modal").empty().append(template("tpl_dtl_form", data[0]));
								var content = $("#modal").html();
								layer.open({
									type: 1,
									title: "用户详情", //标题
									offset: '20%', //位置
									area: "30%", //宽高
									shade: 0.6, //遮罩层样式
									closeBtn: 1, //关闭按钮样式
									shadeClose: true, //点击遮罩层关闭
									anim: 1, //弹出动画样式
									skin: 'layui-layer-molv', //弹出层样式
									scrollbar: false, //不允许浏览器出现滚动条
									content: content //弹出层的内容
								});
								//渲染模板
								form.render();
								laydate.render({
									elem: '#birth' //指定元素
								});
							}
						})
					} else if(layEvent == "edit") {
						formType = "edit";
						$.ajax({
							type: "GET",
							url: "/user/details",
							data: {
								uid: uid
							},
							dataType: "JSON",
							success: function(data) {
								$("#modal").empty().append(template("tpl_form", data[0]));
								var content = $("#modal").html();
								layer.open({
									type: 1,
									title: "修改账号信息",
									offset: '20%',
									area: "40%",
									shade: 0.6,
									closeBtn: 1,
									shadeClose: true,
									anim: 1, //弹出动画样式
									skin: 'layui-layer-molv',
									scrollbar: false,
									content: content
								});
								//渲染模板
								form.render();
							}
						})
					} else if(layEvent == "del") {
						/***********************/
						layer.confirm('确定要删除么？', function(index) {
							$.ajax({
								type: "GET",
								url: "/basic/delete",
								data: {
									uid: uid
								},
								dataType: "JSON",
								success: function(data) {
									//table_reder();
									layer.close(layer.index);
									obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
									layer.msg('删除成功', {
										icon: 1
									});
								}
							})
							console.log("删除事件");
							//向服务端发送删除指令
						});
					};
				})

				//头部按钮监听事件
				table.on("toolbar(test)", function(obj) {
					switch(obj.event) {
						case "add":
							formType = "add";
							$("#modal").empty().append(template("tpl_form", ""));
							var content = $("#modal").html();
							layer.open({
								type: 1,
								title: "添加用户",
								offset: '20px',
								area: "40%",
								shade: 0.6,
								closeBtn: 1,
								shadeClose: true,
								anim: 1,
								skin: 'layui-layer-molv',
								scrollbar: false,
								content: content
							});
							//渲染模板
							form.render();
							break;
					};

				})
				//开关监听事件
				form.on('switch(switchTest)', function(data) {
					//console.log(data.elem); //得到checkbox原始DOM对象
					//console.log(data.elem.checked); //开关是否开启，true或者false
					//console.log(data.value); //开关value值，也可以通过data.elem.value得到
					//console.log(data.othis); //得到美化后的DOM对象
					var off = $(`input[name="admin"]`);
					if(data.elem.checked)
						off.val(1)
					if(!data.elem.checked)
						off.val(0)
				});

				//表单监听事件
				form.on('submit(*)', function(data) {
					//console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
					//console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
					//console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
					//确认路径
					var url;
					if(formType == "add") {
						url = "/user/add";
					} else if(formType == "edit") {
						url = "/user/update";
						if(!data.field.admin)
							data.field.admin = 0;
					} else if(formType == "dtl") {
						url = "/basic/update"
					}

					$.ajax({
						type: "POST",
						url: url,
						data: data.field,
						dataType: "JSON",
						success: function(result) {
							if(result.code == 200) {
								//关闭弹出层
								layer.close(layer.index);
								layer.msg('存入信息成功', {
									icon: 1
								});
								table_reder();
							} else {
								alert(result.msg);
							}
						}
					})
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可
				})

			})
		</script>
	</body>

</html>